<template>
  <div id="home">
    <el-container>

      <base-header :activeIndex="activeIndex"></base-header>

      <router-view class="me-container"/>

      <base-footer v-show="footerShow"></base-footer>

    </el-container>

  </div>

</template>

<script>
import BaseFooter from '@/components/BaseFooter'
import BaseHeader from '@/views/BaseHeader'

export default {
  name: 'Home',
  data (){
    return {
      activeIndex: '/',
      footerShow:true
    }
  },
  components:{
    'base-header':BaseHeader,
    'base-footer':BaseFooter
  },
  beforeRouteEnter (to, from, next){
    next(vm => {
      vm.activeIndex = to.path
    })
  },
  beforeRouteUpdate (to, from, next) {
    if(to.path == '/'){
      this.footerShow = true
    }else{
      this.footerShow = false
    }
    this.activeIndex = to.path
    next()
  }
}
</script>

<style>

.me-container{
  margin: 100px auto 140px;
}

</style>
